<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 layui的css和js -->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>

</head>

<body>

    <div class="box">
        <input type="text" name="" id="" class="layui-input">
        <input type="text" name="" id="" class="layui-input">
        <input type="button" name="" id="按钮" class="layui-btn layui-btn-normal" value="登录">
    </div>


    <script type="module">

        // 引入了axios
        import axios from './js/axios.min.js';
        let baseURL = 'http://localhost:3000'
        axios.defaults.baseURL = baseURL;
        // axios.get(url,{params:{参数}}) 返回promise对象
        // axios.post(url,{请求体的参数}) 返回promise对象
        // axios.patch(url,{请求体的参数}) 返回promise对象
        // axios.delete(url) 返回promise对象
        // axios 请求体 默认采用的就是json格式 -不能用设置content-type
        //请求头中设置token值

        // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        // axios.get().then()

        /*
            1-点击注册按钮的时候-获取输入框的值， 
            2-再发起注册请求-请求成功以后，提示，跳转到登录页
        
        */

        // 点击注册按钮的时候-获取输入框的值
        let ipts = document.querySelectorAll('.box input');
        ipts[2].onclick = function () {
            let username = ipts[0].value;
            let password = ipts[1].value;
            // 2-再发起注册请求-请求成功以后，提示，跳转到登录页
            let loginAPI = '/api/front/users/login';
            axios.post(loginAPI, { username, password }).then(r => {
                //返回登录成功的数据
                console.log(r.data);
                let { uid, token } = r.data
                // 存入用户id和 token 到本地-这个数据再其他页面很容易用到
                localStorage.setItem('uid', uid)
                localStorage.setItem('token', token)



                // if(){}
                layui.use(function () {
                    // 使用layui弹出一个提示框
                    layui.layer.msg(r.data.msg)
                })

                //注册成功，2秒后跳转到登录页
                if (r.data.code == 1) {
                    setTimeout(() => {
                        // location.href = '03-index.html'
                    }, 2000);

                }
            })


        }






        /*
            layui
          官网 -layui   https://gitee.com/layui/layui
          https://layui.dev/

          https://layui.dongyunit.com/doc/modules/layer.html

          1-引入 css 和 js 头部引入


        */


        // layui.use(function () {

        //     //layui.use 函数内，使用layui上某一个功能
        //     var layer = layui.layer;
        //     //使用layui的js代码
        //     setTimeout(() => {
        //         layer.msg('你好')
        //     }, 1000);
        // })


    </script>
    <script></script>



</body>

</html>